<template>
    <div class="app-container">
        <el-form ref="objectForm" :model="object" :rules="objectRules" label-width="150px">
            <el-row>
                <el-row :gutter="gutter">
                    <el-col :span="span">
                        <el-form-item label="楼旁名称：" prop="buildingName">
                            <el-input v-model="object.buildingName"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="span">
                        <el-form-item label="发布状态：">
                            <el-select v-model="object.status" placeholder="发布状态" style="width: 100%;" clearable >
                                <el-option v-for="(item, index) in GLOBAL.status" :key="index" :label="item" :value="index"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="span"></el-col>
                </el-row>
                <el-row :gutter="gutter">
                    <el-col :span="span">
                        <el-form-item label="城市：">
                            <el-input v-model="object.cityName"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="span">
                        <el-form-item label="楼盘地址：" prop="address">
                            <el-input v-model="object.address"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="span">
                        <el-form-item label="占地面积：">
                            <el-input v-model="object.areaCovered"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-row>
            <el-row>
                <el-row :gutter="gutter">
                    <el-col :span="span">
                        <el-form-item label="楼盘状态：" prop="buildingStatus">
                            <el-select v-model="object.buildingStatus" placeholder="发布" style="width: 100%;" clearable >
                                <el-option v-for="(item, index) in GLOBAL.buildingStatus" :key="index" :label="item" :value="index+1"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="span">
                        <el-form-item label="售楼地址：" prop="salesAddress">
                            <el-input v-model="object.salesAddress"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="span">
                        <el-form-item label="交房时间：" prop="deliveryTime">
                            <el-date-picker
                            :span="8"
                            v-model="object.deliveryTime"
                            style="width: 100%;"
                            value-format="yyyy-MM-dd"
                            type="date"
                            placeholder="交房时间"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="gutter">
                    <el-col :span="span">
                        <el-form-item label="售楼电话：" prop="salesPhone">
                            <el-input v-model="object.salesPhone"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="span">
                        <el-form-item label="产权年限：" prop="">
                            <el-input v-model="object.ownershipYears"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="span">
                        <el-form-item label="开发商：" prop="">
                            <el-input v-model="object.developers"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="gutter">
                    <el-col :span="span">
                        <el-form-item label="销售价格：" prop="sellingPrice">
                            <el-input v-model="object.sellingPrice"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="span"></el-col>
                    <el-col :span="span"></el-col>
                </el-row>
            </el-row>
            <el-row>
                <el-row :gutter="gutter">
                    <el-col :span="span">
                        <el-form-item label="供电方式：" prop="">
                            <el-input v-model="building.powerSupplyMode"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="span">
                        <el-form-item label="容积率：" prop="">
                            <el-input v-model="building.plotRatio"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="span">
                        <el-form-item label="绿化率：" prop="">
                            <el-input v-model="building.greeningRate"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="gutter">
                    <el-col :span="span">
                        <el-form-item label="物业公司：" prop="">
                            <el-input v-model="building.propertyCompany"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="span">
                        <el-form-item label="物业类型：" prop="">
                            <el-input v-model="building.propertyType"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="span">
                        <el-form-item label="供暖方式：" prop="">
                            <el-input v-model="building.heatingMode"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="gutter">
                    <el-col :span="span">
                        <el-form-item label="地上：" prop="">
                            <el-input v-model="building.aboveGround"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="span">
                        <el-form-item label="地下：" prop="">
                            <el-input v-model="building.underGround"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="span">
                        <el-form-item label="车位比：" prop="">
                            <el-input v-model="building.parkingSpaceRatio"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="gutter">
                    <el-col :span="span">
                        <el-form-item label="高层：" prop="">
                            <el-input v-model="building.highLevel"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="span">
                        <el-form-item label="洋房：" prop="">
                            <el-input v-model="building.villa"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="span">
                        <el-form-item label="LOFT：" prop="">
                            <el-input v-model="building.LOFT"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-row>
            <!--户型信息-->
            <el-row :gutter="24">
                <el-row>
                    <el-col :span="12">
                        <div style="border-left: 4px solid #4C7FD7; padding-left: 18px;margin-top: 5px" class="font16 color-333">户型信息</div>
                    </el-col>
                    <el-col :span="12" class="text-right">
                        <el-button icon="el-icon-circle-plus-outline" class="border-4C7FD7 color-4C7FD7" style="padding: 5px 10px;" @click="addHouseTypeInformation">新增</el-button>
                    </el-col>
                </el-row>
                <el-row class="mt-15">
                    <el-table :data="building.houseTypeInformation" :header-cell-style="{background:'#F1F3F5',color:'#666666'}" border fit highlight-current-row style="width: 100%">
                        <el-table-column align="center" label="户型名称">
                            <template slot-scope="scope">
                                <el-form-item
                                        :prop="'personComputers.'+ scope.$index +'.others'"
                                        :rules = "{
                                          required: true, message: '户型名称', trigger: 'blur'
                                        }"
                                        label-width="0">
                                    <el-input v-model="scope.row.houseTypeName"/>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="建筑面积（㎡）">
                            <template slot-scope="scope">
                                <el-form-item
                                        :prop="'personComputers.'+ scope.$index +'.others'"
                                        :rules = "{
                                          required: true, message: '户型名称', trigger: 'blur'
                                        }"
                                        label-width="0">
                                    <el-input v-model="scope.row.builtUpArea"/>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="朝向">
                            <template slot-scope="scope">
                                <el-form-item
                                        :prop="'personComputers.'+ scope.$index +'.others'"
                                        :rules = "{
                                          required: true, message: '户型名称', trigger: 'blur'
                                        }"
                                        label-width="0">
                                    <el-input v-model="scope.row.orientation"/>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="层高">
                            <template slot-scope="scope">
                                <el-form-item
                                        :prop="'personComputers.'+ scope.$index +'.others'"
                                        :rules = "{
                                          required: true, message: '户型名称', trigger: 'blur'
                                        }"
                                        label-width="0">
                                    <el-input v-model="scope.row.storeyHeight"/>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="户型结构">
                            <template slot-scope="scope">
                                <el-form-item
                                        :prop="'personComputers.'+ scope.$index +'.others'"
                                        :rules = "{
                                          required: true, message: '户型名称', trigger: 'blur'
                                        }"
                                        label-width="0">
                                    <el-input v-model="scope.row.houseStructure"/>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="总价">
                            <template slot-scope="scope">
                                <el-form-item
                                        :prop="'personComputers.'+ scope.$index +'.others'"
                                        :rules = "{
                                          required: true, message: '户型名称', trigger: 'blur'
                                        }"
                                        label-width="0">
                                    <el-input v-model="scope.row.totalPrice"/>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="户型业态">
                            <template slot-scope="scope">
                                <el-form-item
                                        :prop="'personComputers.'+ scope.$index +'.others'"
                                        :rules = "{
                                          required: true, message: '户型名称', trigger: 'blur'
                                        }"
                                        label-width="0">
                                    <el-input v-model="scope.row.businessType"/>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="居室">
                            <template slot-scope="scope">
                                <el-form-item
                                        :prop="'personComputers.'+ scope.$index +'.others'"
                                        :rules = "{
                                          required: true, message: '户型名称', trigger: 'blur'
                                        }"
                                        label-width="0">
                                    <el-input v-model="scope.row.housewearFurnishings"/>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="户型分析">
                            <template slot-scope="scope">
                                <el-form-item
                                        :prop="'personComputers.'+ scope.$index +'.others'"
                                        :rules = "{
                                          required: true, message: '户型名称', trigger: 'blur'
                                        }"
                                        label-width="0">
                                    <el-input v-model="scope.row.analysisHouse"/>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="操作" width="65">
                            <template slot-scope="scope">
                                <el-button type="text" @click="deletePersonEducation(scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
            </el-row>
            <!--楼盘亮点-->
            <el-row :gutter="24" class="mt-20">
                <el-row>
                    <el-col :span="12">
                        <div style="border-left: 4px solid #4C7FD7; padding-left: 18px;margin-top: 5px" class="font16 color-333">户型信息</div>
                    </el-col>
                    <el-col :span="12" class="text-right">
                        <el-button icon="el-icon-circle-plus-outline" class="border-4C7FD7 color-4C7FD7" style="padding: 5px 10px;" @click="addHouseTypeInformation">新增</el-button>
                    </el-col>
                </el-row>
                <el-row class="mt-15">
                    <el-table :data="building.realEstateHighLights" :header-cell-style="{background:'#F1F3F5',color:'#666666'}" border fit highlight-current-row style="width: 100%">
                        <el-table-column align="center" label="亮点名称">
                            <template slot-scope="scope">
                                <el-form-item
                                        :prop="'personComputers.'+ scope.$index +'.others'"
                                        :rules = "{
                                          required: true, message: '户型名称', trigger: 'blur'
                                        }"
                                        label-width="0">
                                    <el-input v-model="scope.row.houseTypeName"/>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="亮点描述">
                            <template slot-scope="scope">
                                <el-form-item
                                        :prop="'personComputers.'+ scope.$index +'.others'"
                                        :rules = "{
                                          required: true, message: '户型名称', trigger: 'blur'
                                        }"
                                        label-width="0">
                                    <el-input v-model="scope.row.builtUpArea"/>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="操作" width="65">
                            <template slot-scope="scope">
                                <el-button type="text" @click="deletePersonEducation(scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
            </el-row>
            <!--楼盘相册-->
            <el-row :gutter="24" class="mt-20">
                <el-row>
                    <el-col :span="12">
                        <div style="border-left: 4px solid #4C7FD7; padding-left: 18px;margin-top: 5px" class="font16 color-333">户型信息</div>
                    </el-col>
                    <el-col :span="12" class="text-right">
                        <el-button icon="el-icon-circle-plus-outline" class="border-4C7FD7 color-4C7FD7" style="padding: 5px 10px;" @click="addHouseTypeInformation">新增</el-button>
                    </el-col>
                </el-row>
                <el-row class="mt-15">
                    <el-table :data="building.propertyAlbum" :header-cell-style="{background:'#F1F3F5',color:'#666666'}" border fit highlight-current-row style="width: 100%">
                        <el-table-column align="center" label="图片名称">
                            <template slot-scope="scope">
                                <el-form-item
                                        :prop="'personComputers.'+ scope.$index +'.others'"
                                        :rules = "{
                                          required: true, message: '户型名称', trigger: 'blur'
                                        }"
                                        label-width="0">
                                    <el-input v-model="scope.row.pictureName"/>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="图片分类">
                            <template slot-scope="scope">
                                <el-form-item
                                        :prop="'personComputers.'+ scope.$index +'.others'"
                                        :rules = "{
                                          required: true, message: '户型名称', trigger: 'blur'
                                        }"
                                        label-width="0">
                                    <el-input v-model="scope.row.pictureClassification"/>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="操作" width="65">
                            <template slot-scope="scope">
                                <el-button type="text" @click="deletePersonEducation(scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
            </el-row>
            <!--项目楼书-->
            <!--添加标签-->
        </el-form>
        <div class="gpo-btn text-left p30" style="padding-top: 20px">
            <el-button :loading="btnLoading" type="primary" size="big" style="width: 120px;" @click="onSubmit" >保存</el-button>
            <el-button style="width: 120px;" size="big" @click="onBack">返回</el-button>
        </div>
        <!-- 户型信息 -->
        <el-dialog :visible.sync="dialogFormVisible1" title="新增视频" width="450px">
            <el-form ref="objectForm" :model="object" :rules="objectRules" label-width="110px">
                <el-row>
                    <el-form-item label="户型图：" prop="videoCover">
                        <el-input v-model="object.videoCover"/>
                    </el-form-item>
                    <el-form-item label="户型名称：" prop="videoTitle">
                        <el-input v-model="object.videoTitle"/>
                    </el-form-item>
                    <el-form-item label="户型面积：" prop="videoDesc">
                        <el-input v-model="object.videoDesc"/>
                    </el-form-item>
                    <el-form-item label="朝向：" prop="videoUrl">
                        <el-input v-model="object.videoUrl"/>
                    </el-form-item>
                    <el-form-item label="层高：" prop="videoUrl">
                        <el-input v-model="object.videoUrl"/>
                    </el-form-item>
                    <el-form-item label="户型结构：" prop="videoUrl">
                        <el-input v-model="object.videoUrl"/>
                    </el-form-item>
                    <el-form-item label="总价：" prop="videoUrl">
                        <el-input v-model="object.videoUrl"/>
                    </el-form-item>
                    <el-form-item label="户型业态：" prop="videoUrl">
                        <el-input v-model="object.videoUrl"/>
                    </el-form-item>
                    <el-form-item label="居室：" prop="videoUrl">
                        <el-input v-model="object.videoUrl"/>
                    </el-form-item>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="onCancel">取 消</el-button>
                <el-button type="primary" :loading="btnLoading" @click="onSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import mixin from './rules/building.js'
    export default {
        name: 'cratebuilding',
        mixins: [mixin],
        data() {
            return {
                gutter: 20,
                span: 8,
                dialogFormVisible1: '',
                object: {
                    'buildingName': '',
                    'releaseStatus': 1,
                    'cityName': '',
                    'address': '',
                    'areaCovered': '',
                    'buildingStatus': '',
                    'salesAddress': '',
                    'deliveryTime': '',
                    'salesPhone': '',
                    'ownershipYears': '',
                    'developers': '',
                    'sellingPrice': '',
                    'powerSupplyMode': '',
                    'plotRatio': '',
                    'greeningRate': '',
                    'propertyCompany': '',
                    'propertyType': '',
                    'heatingMode': '',
                    'parkingSpacesNumber': '',
                    'aboveGround': '',
                    'underGround': '',
                    'parkingSpaceRatio': '',
                    'propertyCost': '',
                    'highLevel': '',
                    'villa': '',
                    'LOFT': '',
                    'houseTypeInformation': [
                        {
                            'serialNumber': '',
                            'houseTypeName': '',
                            'builtUpArea': '',
                            'orientation': '',
                            'storeyHeight': '',
                            'houseStructure': '',
                            'totalPrice': '',
                            'businessType': '',
                            'analysisHouse': '',
                            'floorPlan': [
                                {
                                    url: ''
                                }
                            ],
                            'housewearFurnishings': ''
                        }
                    ],
                    'realEstateHighLights': [
                        {
                            'highlightName': '',
                            'highlightDesc': '',
                            'serialNumber': ''
                        }
                    ],
                    'propertyAlbum': [
                        {
                            'serialNumber': '',
                            'pictureName': '',
                            'pictureClassification': ''
                        }
                    ],
                    'tag': [],
                    'projectBuilding': '',
                    'dataType': {
                        'name': '楼盘管理'
                    }
                },
                houseTypeInformation: {
                    'serialNumber': '',
                    'houseTypeName': '',
                    'builtUpArea': '',
                    'orientation': '',
                    'storeyHeight': '',
                    'houseStructure': '',
                    'totalPrice': '',
                    'businessType': '',
                    'analysisHouse': '',
                    'floorPlan': [
                        {
                            url: ''
                        }
                    ],
                    'housewearFurnishings': ''
                },
            }
        },
        methods: {


        }
    }
</script>

<style scoped>

</style>